import React, { useState } from "react";
import { Layout, Menu,Dropdown ,Avatar} from "antd";
import Home from "../Home/Home";
import Answer from "../answer/Answer";
import Configs from "../configs/Configs";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import Count from '../Context/count'

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  HomeOutlined,
  KeyOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import "./newssandbox.css";
const { Header, Sider, Content } = Layout;

 function NewsSandBox (props) {


  const [collapsed,setcollapsed] = useState(false)

  const toggle = () => {
    setcollapsed(!collapsed)
  };

  const menu = (
    <Menu>
      <Menu.Item key="1">修改密码</Menu.Item>
      <Menu.Item key="2" danger onClick={()=>{
        localStorage.removeItem("token") //清除token
        props.history.replace("/login") // 重定向到首页
      }}>退出登录</Menu.Item>
    </Menu>
  );
 
    return (
      <Count>
        <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="title">知识竞赛</div>

          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} >
            <Menu.Item key="/home" onClick={()=>{props.history.push('/home')}} icon= {<HomeOutlined />} >首页</Menu.Item>
            <Menu.Item key="/answer" onClick={()=>{props.history.push('/answer')}} icon= {<KeyOutlined />} >答题</Menu.Item>
            <Menu.Item key="/configs" onClick={()=>{props.history.push('/configs')}} icon= {<SettingOutlined />} >配置</Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: toggle,
              }
            )}
            <div style={{ float: "right" }}>
        <Dropdown overlay={menu}>
          <div>
            <Avatar size="large" icon={<HomeOutlined />} />
            admin
          </div>
        </Dropdown>
      </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 0,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path="/home" component={Home}></Route>
              <Route path="/answer" component={Answer}></Route>
              <Route path="/configs" component={Configs}></Route>
              <Redirect from="/" to="/home" exact></Redirect>
            </Switch>
          </Content>
        </Layout>
      </Layout>
      </Count>
    );
  
}
export default withRouter(NewsSandBox)
